<template>
	<div class="detailsAchievement" v-loading="loading">
		<div class="classIndex_lk classIndex_h">
			<em @click="goback()">学生成绩</em>
			<strong><i>></i>成绩详情</strong>
		</div>
		<!--  -->
		<div class="detailsAchievement_tabel" v-if="detailsList.length > 0">
			<template>
				<el-table border :data="detailsList" style="width: 100%">
					<el-table-column prop="username" label="姓名" align="center" show-overflow-tooltip>
					</el-table-column>
					<!-- <el-table-column
						prop="gradename"
						label="年级"
						width="60px"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column
						prop="classname"
						label="班级"
						width="60px"
						show-overflow-tooltip>
					</el-table-column> -->
					<el-table-column prop="testtime" label="考试时间" width="200px" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="testname" label="试卷名称" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="sum_score" label="试卷总分" width="80px" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="score" label="个人分数" width="80px" align="center" show-overflow-tooltip>
					</el-table-column>
					<!-- <el-table-column
						prop="percent"
						width="80px"
						label="成绩占比"
						show-overflow-tooltip>
					</el-table-column> -->
					<el-table-column prop="rank" label="排名" width="80px" sortable align="center" show-overflow-tooltip>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			path: this.$route.query.id,
			detailsList: [],
			page_index: 1,
			page_size: this.$g.page_index,
			total_number: 0,
			testTitle: '',
			placeholder: false,
			loading: true,
		};
	},
	created() {
		this.getDetailsList()
	},
	watch: {

		'$store.state.gradeid': {
			handler(val, newval) {
				this.path = sessionStorage.getItem('classId')
				this.getDetailsList()
			},
			immediate: true
		}
	},
	computed: {

	},
	methods: {
		goback() {
			this.$router.back(-1)
		},
		/**
		 * 列表数据
		 * @DateTime 2020-03-05T16:16:28+0800
		 * @return   {[type]}                 [description]
		 */
		getDetailsList() {
			let success = (res => {
				let data = res.data;

				this.detailsList = data.data;
				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index)

				if (this.detailsList.length > 0) {
					this.testTitle = this.detailsList[0].testname;
				}

				this.loading = false;
				this.placeholder = this.detailsList.length === 0 ? true : false

			});
			this.$ajax({
				url: 'api/statistics/student_grade_static_list',
				method: 'get',
				params: {
					taskid: this.$route.query.aid,
					classid: this.$route.query.id,
					page_index: this.page_index,
					page_size: this.page_size
				},
				func: { success: success }
			})
		},
		change_page(val) {
			this.page_index = val;
			this.getDetailsList()
		},
		//删除
		removeData() {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {
				this.dataTable = false
				this.$message.success('删除成功');
			}).catch(() => {
				this.$message.info('已取消删除');
			});
		},
	}
}
</script>